
<template>
  <div class="img1">
    <div style="height: 20px; float: top;">
    </div>
    <div style="width: 470px; height: 600px; margin-left: 35%;margin-top:3%;background:  #ffffff; border-radius: 10px; align-content: center">
      <el-form v-show="dialogFormVisible">
        <el-form-item style="padding-left: 25px;padding-top:30px">
          <span style="font-size: 35px">注册账号</span>
        </el-form-item>
        <el-form-item style="padding-left: 25px;line-height: 0px">
          <span style="font-size: 15px;color: gray">请选择你在日常教学中的实际身份</span>
        </el-form-item>
        <el-form-item align="center" style="display: inline-block">
          <el-button-group >
            <el-button style="border: none;height: 60px;padding-top: 5px" @click="addTeacherForm"><img src="../assets/images/teacher.png"/></el-button>
            <el-button type="primary" style="width: 320px;height: 65px" @click="addTeacherForm">我是教师/助教</el-button>
          </el-button-group>
        </el-form-item>
        <el-form-item align="center" style="padding-top:40px;display: inline-block">
          <el-button-group >
            <el-button style="border: none;height: 60px;padding-top: 5px" @click="addStudentForm"><img src="../assets/images/student.png"/></el-button>
            <el-button type="primary" style="width: 320px;height: 65px" @click="addStudentForm">我是学生</el-button>
          </el-button-group>
        </el-form-item>
        <el-form-item align="right" style="padding-right: 50px">
          <router-link to="/login">
            <a style="text-decoration: none">
              <span style="color: gray">已有账号？</span>
              <span style="color: blue">去登陆</span>
            </a>
          </router-link>
        </el-form-item>

      </el-form>

      <el-form ref="userForm1" :model="registerForm" style="margin-left: 20px; margin-right: 20px;" :rules="rules" v-show="dialogFormVisible1">
        <el-form-item style="padding-top: 20px">
          <el-button @click="showChoose" style="border: none"><img src="../assets/images/returnReg.png" height="40" width="40"/></el-button>
          <span style="font-size: 30px;line-height: 30px;height: 40px" v-show="showStudentButton">学生注册</span>
          <span style="font-size: 30px;line-height: 30px;height: 40px" v-show="showTeacherButton">教师/助教注册</span>
        </el-form-item>
        <el-form-item prop="username">
          <el-input v-model="registerForm.username" placeholder="用户名" autocomplete="off" prefix-icon="el-icon-goods"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input type="password" v-model="registerForm.password" placeholder="密码" autocomplete="off" prefix-icon="el-icon-more"></el-input>
        </el-form-item>
        <el-form-item prop="checkPassword">
          <el-input type="password" v-model="checkPassword" placeholder="再次输入密码" autocomplete="off" prefix-icon="el-icon-more"></el-input>
        </el-form-item>

        <el-form-item prop="school">
          <el-input v-model="registerForm.school" placeholder="学校" autocomplete="off" prefix-icon="el-icon-tickets"></el-input>

        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="registerForm.name" placeholder="姓名" autocomplete="off" prefix-icon="el-icon-printer"></el-input>

        </el-form-item>

        <el-form-item prop="uid">
          <el-input v-model="registerForm.uid" placeholder="学号" v-show="showStudentButton" autocomplete="off" prefix-icon="el-icon-menu
"></el-input>
        </el-form-item>

        <el-form-item align="center">
          <el-button type="primary" @click="submit()" style="width: 430px" v-show="showStudentButton" >注册为学生</el-button>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="submit()" style="width: 430px" v-show="showTeacherButton" >注册为老师/助教</el-button>
        </el-form-item>
      </el-form>

    </div>
    <router-link to='/login'>
      <p style="width: 50px; float: right; font-size: 13px;"> 去登录</p>
    </router-link>
    <div style="width: 100px;height: 30px; margin-left: 300px; font-size: 13px;">
      已有账号?
    </div>

  </div>
</template>

<script>
import { register } from '../api/require'
export default {
  data () {
    // 校验

    const validateUid = (rule, value, callback) => {
      const uidReg = /^1[0-9]{10}$/
      if ((uidReg.test(value) && value.length <= 11 && value !== '') || this.registerForm.type === 'teacher') {
        callback()
      } else { callback(new Error('请输入正确的学号')) }
    }

    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 6) {
        callback(new Error('密码长度不小于6位'))
      } else {
        if (this.registerForm.password !== '' && this.registerForm.password.length > 6) {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (this.checkPassword === '') {
        callback(new Error('请再次输入密码'))
      } else if (this.checkPassword !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      identifyCodes: '1234567890',
      identifyCode: '',
      dialogFormVisible: true,
      dialogFormVisible1: false,
      showStudentButton: false,
      showTeacherButton: false,
      vcode: '',
      check: '',
      checkPassword: '',
      registerForm: {
        username: '',
        name: '',
        password: '',
        uid: '',
        school: '',
        type: ''
      },
      user: [],

      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        school: [
          { required: true, message: '请输入学校', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        uid: [
          { validator: validateUid, required: true, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, required: true, trigger: 'blur' }
        ],
        checkPassword: [
          { validator: validatePass2, required: true, trigger: 'blur' }
        ]

      }
    }
  },
  methods: {

    showChoose () {
      this.dialogFormVisible = true
      this.dialogFormVisible1 = false
    },
    addStudentForm () {
      this.dialogFormVisible = false
      this.dialogFormVisible1 = true
      this.showStudentButton = true
      this.showTeacherButton = false
      this.registerForm.uid = ''
      this.registerForm.name = ''
      this.registerForm.password = ''
      this.checkPassword = ''
      this.registerForm.username = ''
      this.registerForm.school = ''
      this.registerForm.type = 'student'
    },
    addTeacherForm () {
      this.dialogFormVisible = false
      this.dialogFormVisible1 = true
      this.showStudentButton = false
      this.showTeacherButton = true
      this.registerForm.uid = ''
      this.registerForm.name = ''
      this.registerForm.password = ''
      this.checkPassword = ''
      this.registerForm.username = ''
      this.registerForm.school = ''
      this.registerForm.type = 'teacher'
      console.log(this.registerForm.uid)
    },
    submit () {
      console.log(this.registerForm.type)
      this.$refs.userForm1.validate((valid) => {
        if (valid) {
          register(this.registerForm).then(res => {
            console.log(res)
            if (res.data.code === 200) {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'success'
              })
            } else {
              this.$message({
                showClose: true,
                message: res.data.message,
                type: 'error'
              })
            }
            this.registerForm = {
              username: '',
              name: '',
              password: '',
              uid: '',
              school: '',
              type: this.registerForm.type
            }
            this.checkPassword = ''
          })
        } else {
          this.$message.error('请输入所有字段')
        }
      })
    },
    addUser () {

    }

  }
}

</script>

<style scoped>
  .img1 {
    width: 100%;
    height: 100%;
    background: url('../assets/images/signUpBackground.jpg') center center no-repeat;
    background-size: cover;

  }
  .login-code{
    cursor: pointer;
  }
  a {
    text-decoration: none;
  }
</style>
